<template>
	<div>
		<h1>Genshin Constellation Increaser</h1>
		<ul>
			<li v-for="role in roles" :key="role.name" style="display: flex">
				<span>{{ role.name }}</span>
				<div class="">
					<button @click="reduceConstellation(role.name)">-</button>
					<span class="Constellation">{{ role.Constellation }}</span>
					<button @click="addConstellation(role.name)">+</button>
				</div>
			</li>
		</ul>
		<div class="total">总数：{{ totalOrders }} 价格：{{ totalAge }}</div>
	</div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex';

export default {
	name: 'ShoppingCart',
	props: ['Roles'],
	data() {
		return {
			data: [],
		};
	},
	created() {
		// this.data = this.$store.state.roles;
	},
	computed: {
		...mapState(['roles', 'total']),
		...mapGetters(['totalAge', 'totalOrders']),
	},
	methods: {
		...mapMutations(['addConstellation', 'reduceConstellation']),
	},
};
</script>

<style scoped>
ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px;
	background-color: #b36d61;
}
li {
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	border-radius: 5px;
}
button {
	border: 1px solid #ccc;
	padding: 5px 10px;
	border-radius: 5px;
}

.Constellation {
	padding: 0 5px;
	color: #fff;
}

@property --c1 {
	syntax: '<color>';
	inherits: false;
	initial-value: #4634ee;
}
@property --c2 {
	syntax: '<color>';
	inherits: false;
	initial-value: #d77f69;
}
h1 {
	background: linear-gradient(45deg, var(--c1), var(--c2));
}

@keyframes move {
	50% {
		--c1: #d77f69;
		--c2: #4634ee;
	}
	100% {
		--c1: #4634ee;
		--c2: #d77f69;
	}
}

h1 {
	animation: move 5s linear infinite;
}

.total {
	color: #fff;
}
</style>
